import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

import { BadgeComponent } from './badge.component';
import { Component, Input, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

@Component({
  template: `
    <lv-badge #badgeComponent [lvMaxValue]="lvMaxValue" [lvValue]="lvValue" [lvAsStatus]="lvAsStatus"></lv-badge>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
class TestBadgeBasicComponent {
  @ViewChild('badgeComponent', { static: true }) badgeComponent: BadgeComponent;
  @Input() lvMaxValue: number;
  @Input() lvValue: number;
  @Input() lvAsStatus: BadgeComponent['lvAsStatus'];
}

describe('BadgeComponent', () => {
  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      imports: [NoopAnimationsModule],
      declarations: [BadgeComponent, TestBadgeBasicComponent],
    }).compileComponents();
  }));

  describe('render', () => {
    it('should render correctly', () => {
      const fixture = TestBed.createComponent(BadgeComponent);
      expect(fixture).toMatchSnapshot();
    });
  });

  describe('basic', () => {
    let component: TestBadgeBasicComponent;
    let fixture: ComponentFixture<TestBadgeBasicComponent>;
    let cdr: ChangeDetectorRef;

    beforeEach(() => {
      fixture = TestBed.createComponent(TestBadgeBasicComponent);
      component = fixture.componentInstance;
      cdr = fixture.debugElement.injector.get(ChangeDetectorRef);
      component.lvMaxValue = 3;
    });

    it('should apply value', () => {
      const value = 5;
      component.lvValue = value;
      fixture.detectChanges();
      expect(component.badgeComponent.valueArray).toEqual([String(value)]);
    });

    it('should apply maxValue', () => {
      const maxValue = 5;
      component.lvMaxValue = maxValue;
      fixture.detectChanges();
      expect(component.badgeComponent.maxValueArray).toEqual([String(maxValue)]);
    });

    it('should asStatus', () => {
      const statusArr = ['success', 'processing', 'default', 'error', 'warning'];

      const valid = (status: BadgeComponent['lvAsStatus']) => {
        component.lvAsStatus = status;
        cdr.detectChanges();
        expect(fixture.debugElement.query(By.css(`.lv-badge-status-${status}`))).toBeTruthy();
      };
      statusArr.forEach(valid);
    });
  });
});
